<!DOCTYPE html>
<html>
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="咚咚" />
    <meta name="keywords" content="咚咚,舒华东,东东,华东,WernerShu,werner" />
    <meta name="author" content="舒华东" />
    <meta name="baidu-site-verification" content="code-bLIgX2UH2W" />
    <title>WernerShu</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="./assets/css/onlinewebfonts.css"
    />
    <link rel="stylesheet" type="text/css" href="./assets/css/vno.css" />
    <link rel="stylesheet" type="text/css" href="./assets/css/iconfont.css" />
    <link rel="apple-touch-icon" href="./apple-touch-icon.png" />
    <link rel="icon" href="./favicon.ico" />
  </head>

  <body>
    <span class="mobile btn-mobile-menu">
      <i class="social iconfont icon-list btn-mobile-menu__icon"></i>
      <i class="social iconfont icon-angleup btn-mobile-close__icon hidden"></i>
    </span>
    <header id="panel" class="panel-cover">
      <div class="panel-main">
        <div class="panel-main__inner panel-inverted">
          <div class="panel-main__content">
            <div class="ih-item circle effect right_to_left">
              <a href="#" title="" class="blog-button">
                <div class="img">
                  <img
                    src="./img/logo3.jpeg"
                    alt="img"
                    class="js-avatar iUp profilepic"
                  />
                </div>
                <div class="info iUp">
                  <div class="info-back">
                    <h2>Fighting</h2>
                    <p>2022 · 自律</p>
                  </div>
                </div>
              </a>
            </div>

            <!-- <a href="#" title="Dmego Home" class="profilepic">
                        <img src="./img/logo2.jpeg" width="80" alt="Dmego`s logo" class="js-avatar iUp show" />
                    </a> -->
            <h1 class="panel-cover__title panel-title iUp">
              <a href="#" title="Werner Shu">东东-Werner</a>
            </h1>
            <p class="panel-cover__subtitle panel-subtitle iUp">
              Great minds have purpose, others have wishes.
            </p>
            <hr class="panel-cover__divider iUp" />
            <p id="description" class="panel-cover__description iUp">
              如何得与凉风约，不共尘沙一并来!
              <br />
              <strong>-「中牟道中」</strong>
            </p>
            <div class="navigation-wrapper iUp">
              <div>
                <nav class="cover-navigation cover-navigation--primary">
                  <ul class="navigation">
                    <li class="navigation__item">
                      <a href="/" class="blog-button">首页</a>
                    </li>
                    <li class="navigation__item">
                      <a
                        href="http://blog.shuocean.com"
                        class="blog-button"
                        target="_blank"
                        >博客</a
                      >
                    </li>
                    <li class="navigation__item">
                      <a
                        href="./assets/shd.pdf"
                        class="blog-button"
                        target="_blank"
                        >简历</a
                      >
                    </li>
                    <li class="navigation__item">
                      <a
                        href="http://blog.shuocean.com/s/about"
                        class="blog-button"
                        target="_blank"
                        >关于</a
                      >
                    </li>
                  </ul>
                </nav>
              </div>
              <div class="iUp">
                <nav class="cover-navigation navigation--social">
                  <ul class="navigation">
                    <li class="navigation__item">
                      <a
                        href="https://github.com/WernerShu"
                        title="github"
                        target="_blank"
                      >
                        <i class="social iconfont icon-github"></i>
                        <span class="label">github</span>
                      </a>
                    </li>
                    <li class="navigation__item">
                      <a
                        href="http://www.cnblogs.com/dmego/"
                        title="cnblogs"
                        target="_blank"
                      >
                        <i class="social iconfont icon-juejin"></i>
                        <span class="label">juejin</span>
                      </a>
                    </li>
                    <li class="navigation__item">
                      <a
                        href="https://gitee.com/shudd"
                        title="cnblogs"
                        target="_blank"
                      >
                        <i class="social iconfont icon-mayun"></i>
                        <span class="label">mayun</span>
                      </a>
                    </li>
                    <li class="navigation__item">
                      <a
                        href="https://www.zhihu.com/people/king-29-37"
                        title="zhihu"
                        target="_blank"
                      >
                        <i class="social iconfont icon-zhihu"></i>
                        <span class="label">zhihu</span>
                      </a>
                    </li>
                    <li class="navigation__item">
                      <a
                        href="https://blog.csdn.net/qq_40852667?spm=1000.2115.3001.5343"
                        title="zhihu"
                        target="_blank"
                      >
                        <i class="social iconfont icon-csdn"></i>
                        <span class="label">csdn</span>
                      </a>
                    </li>
                    
                    <li class="navigation__item">
                      <a
                        href="https://weibo.com/u/2669087111"
                        title="cnblogs"
                        target="_blank"
                      >
                        <i class="social iconfont icon-weibo"></i>
                        <span class="label">weibo</span>
                      </a>
                    </li>

                    <li class="navigation__item">
                      <a href="mailto:shdkey@gmail.com" title="email">
                        <i class="social iconfont icon-email"></i>
                        <span class="label">email</span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-cover--overlay cover-slate"></div>
      </div>
      <div class="music" id="music">
        <iframe class="music-iframe" src="https://music.qier222.com/"></iframe>

        <div class="music-click" id="music-click">
        </div>
      </div>
      <!-- <div class="beian iUp">
            <a class="icp" href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action" target="_blank">XXX</a>
            <a class="gwab" href="http://www.beian.gov.cn/portal/recordQuery" target="_blank">XXX</a>
        </div> -->
      <div class="remark iUp">
        <p class="power">
          Powered By   <a class="a-link" href="https://github.com/SHDjason" target="_blank"> 咚咚 </a>
          <a class="a-link" href="https://beian.miit.gov.cn/" target="_blank">
           赣ICP备2021010846号-1
          </a>
        </p>
      </div>
    </header>
    <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="./assets/js/fetch.min.js"></script>
    <script type="text/javascript" src="./assets/js/main.js"></script>
    <script
      type="text/javascript"
      src="./assets/json/images.json?cb=getBingImages"
    ></script>
  </body>
</html>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=G-4L0GELWRT2"
></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());

  gtag("config", "G-4L0GELWRT2");
</script>
<script>
  var music = document.getElementById('music')
  var musicClick = document.getElementById('music-click')

  musicClick.addEventListener('click', function(e){
    if( music.style.top === '0px' ){
      music.style.top = '-100%'
      musicClick.style.transform= 'rotateX(0deg)';
      musicClick.style.bottom = '-18px'
    }else{
      music.style.top = 0
      musicClick.style.transform= 'rotateX(180deg)';
      musicClick.style.bottom = 0
    }
    
  })
</script>
<style>
    .a-link{
        color:#fff;
    }
  .music{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: -100%;
    transition: all .5s;

    z-index: 999;

    
  }
  .music-click{
    position: absolute;
    height: 20px;
    width: 55px;
    bottom: -18px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    left: 0;
    right: 0;
    margin: auto;  
    background-color: rgb(151, 167, 255);
    transition: all .5s;
    opacity: .2;
    font-size: 14px;
    background-image: url('./img/下拉.png');
    background-size: 60% 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    z-index: 9999;
  }
  .music-iframe{
    width: 100%;
    height: 100%;
  }
  .music-click:hover{
    cursor: pointer;
    height: 25px;
    width: 65px;
    bottom: -25px;
    opacity: .7;
    font-size: 16px;
    font-weight: bolder;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;


    /* animation: show 1s linear 1s infinite; */
  }
  /* .music-click:focus{
    transform: rotateX(180deg);
  } */
  /* @keyframes show {
    20% {
        opacity: .3;
    }
    40% {
      opacity: .4;
      height: 26px;
    width: 56px;

    }
    60% {
      opacity: .6;
      height: 27px;
    width: 57px;

    }

    80% {
      opacity: .8;
      height: 28px;
    width: 58px;

    }
    100% {
      opacity: 1;

    }
} */
</style>
